<template>
  <div>
    <div class="box">
      <div class="b-img">
        <img src="http://39.105.198.203:3001/cate/jx.jpg" alt="">
    </div>
    <div class="gdtxt">
<div class="scroll-container">
    <div class="scroll-text">
    一杯香茶叶武夷山桐木关正山小种红茶4盒500克礼品袋 罐装明前金骏眉红茶浓香型;一杯香 茶叶 红茶 金骏眉买1送1共200克礼盒装 正宗武夷山桐木关金俊眉正山小种散装;一杯香茶叶 2018新茶明前龙井茶 200克装茶叶明前绿茶散装浓香礼盒装;一杯香茶叶安溪铁观音2018新茶4盒共500克礼盒装 正宗乌龙茶正宗春茶散装新茶上市;安吉白茶2018新茶明前春茶茶叶 正宗安吉白茶2盒共200g一杯香茶叶绿茶珍稀黄金白茶散装礼盒装小罐;一杯香浓香型茉莉花茶买1送1共500g 2018新茶茶叶绿茶礼盒装广西横县福建散装花草茶
    </div>
</div>
    </div>
    <div class="fenge">
        <div><hr style="display: inline-block;width: 35vw;color: yellowgreen; border-color: yellowgreen;"></div>
       <div>精选好茶</div>
        <div><hr style="display: inline-block;width: 35vw;color: yellowgreen; border-color: yellowgreen;"></div>
    </div>
    </div>
    <div class="Box">

      <div class="it" v-for="v,k in list">
        <van-card
          @click="go(v)"
          :price="(v.price/1).toFixed(2)"
          :desc="v.tintro"
          :title="v.tname"
          :thumb="v.fullSrc"
        >
          <!-- <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template> -->
          <template #footer>
            <van-button class="btns" color="rgb(150, 191, 183)" @click.stop="addcar(v)" type="primary" size="mini">加入购物车</van-button>
           
          </template>
        </van-card>
      </div>
    </div>

  </div>
</template>
<script>
import { Toast } from 'vant';
import { indexData } from '@/api';
import {addCar} from '@/api';
import {get} from '@/utils/local'
export default {
    components: {},
    props: {},
    data() {
        return {
          list:[]
        };
    },
    computed: {},
    created() {},
    mounted() {
      this.getData()
    },
    methods: {
      async getData(){// 获取首页数据
        let res=await indexData()
        console.log(res);
        if(res.code==200){
          this.list=res.data.list
        }
      },
      async addcar(v){// 加入购物车
        //判断是否登录
        //跳路由
        if(this.$checkLogin())return// 没有登录 就不执行以下逻辑
        //  console.log(v);
        let {tid,tname,timg,price}=v
        let item={uid:get("userinfo").uid,tid,tname,timg,price,pnum:1,ischeck:1}
        let res= await addCar(item)
        // console.log(res);
       Toast("加入购物车成功")
        
         
      },
      go(v){// 去详情
         console.log(v);
        //  路由传参 
         this.$router.push("/det?tid="+v.tid)
         
      }
    },
    watch: {},
};
</script>
<style scoped >
.btns{
  width: 80px;
  height: 30px;
  border-radius: 10px;
  font-size: 12px;
  margin-top: -50px;
}
.b-img{
    width: 100vw;
    height: 30vh;
}
.b-img>img{
    width: 100%;
    height: 100%;
}
.gdtxt{
    width:100vw;
    height: 40px;
    margin-top: 20px;
    color: orange;
}

.fenge{
   padding-left: 10px;
   padding-right: 10px;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    color: yellowgreen;
}

.scroll-container {
    width: 90vw;
    margin:  0 auto;
  white-space: nowrap; /* 保持文本在一行内 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  position: relative; /* 相对定位 */
}

.scroll-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0px; /* 滚动条宽度 */
  height: 100%;
  background: linear-gradient(to left, transparent, white 50%);
}

.scroll-text {
  display: inline-block;
  padding-left: 100%; /* 初始偏移量，使文本在容器外开始 */
  animation: scroll-left 60s linear infinite; /* 滚动动画 */
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%); /* 滚动到文本宽度的负值 */
  }
}
</style>
